<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cascading Dropdowns</title>
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>

<label for="category">Category:</label>
<select id="category" class="cascading-dropdown">
  <option value="1">Category 1</option>
  <option value="2">Category 2</option>
  <option value="3">Category 3</option>
</select>

<label for="subcategory">Subcategory:</label>
<select id="subcategory" class="cascading-dropdown"></select>

<script>
  $(document).ready(function () {
    // Sample data for demonstration
    var subcategories = {
      1: ["Subcategory 1.1", "Subcategory 1.2"],
      2: ["Subcategory 2.1", "Subcategory 2.2"],
      3: ["Subcategory 3.1", "Subcategory 3.2"]
    };

    // Function to update subcategory dropdown based on the selected category
    function updateSubcategories() {
      var selectedCategory = $("#category").val();
      var subcategoryDropdown = $("#subcategory");

      // Clear existing options
      subcategoryDropdown.empty();

      // Add new options based on the selected category
      $.each(subcategories[selectedCategory], function (index, value) {
        subcategoryDropdown.append($("<option>").text(value));
      });
    }

    // Initial update
    updateSubcategories();

    // Attach change event to the category dropdown
    $("#category").on("change", function () {
      updateSubcategories();
    });
  });
</script>

</body>
</html>
